<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { reactive } from "vue";

const pieData = [
  { value: 64, name: "办公类" },
  { value: 63, name: "体育类" },
  { value: 58, name: "艺术类" },
  { value: 54, name: "活动类" },
]
const option = reactive({
  color: ["#18F6F8", "#288CFC", "#FFEB1B", "#4BF8B2"],
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  toolbox: {
    show: true,
  },
  legend: {
    left: "2%", //可设定图例在左、右、居中
    bottom: "5%", //可设定图例在上、下、居中
    align: "left", //字在图例的左边或右边【left/right】
    orient: "horizontal", //图例方向【horizontal/vertical】
    icon: "rect", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
    itemGap: 15,
    data: [
      {
        name: "办公类",
        textStyle: {
          color: "#18F6F8", // 单独设置某一个图列的颜色
        },
      },
      {
        name: "体育类",
        textStyle: {
          color: "#288CFC", // 单独设置某一个图列的颜色
        },
      },
      {
        name: "艺术类",
        textStyle: {
          color: "#FFEB1B", // 单独设置某一个图列的颜色
        },
      },
      {
        name: "活动类",
        textStyle: {
          color: "#4BF8B2", // 单独设置某一个图列的颜色
        },
      },
    ],
  },
  title: {
    text: '领用物资',
    top: '3%',
    textAlign: 'center',
    right: '8%',
    textStyle: {
      color: '#18F6F8',
      fontSize: 14,
      fontWeight: '600',
    },
  },
  series: [
    {
      name: "领用物资",
      type: "pie",
      radius: [0, '60%'],
      center: ["80%", "50%"],
      label: {
        show: false
      },
      labelLine: {
        show: true,
      },
      // 各部分之间得间隔
      itemStyle: {
        borderRadius: 0,
        borderColor: "",
        borderWidth: 1,
      },
      data: pieData,
    },
  ],
});
</script>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
